<template>
  <Row class="layout-content-body">
    <dtable :columns="columns"
            :dataAll="dataAll"
            :dataShow="dataShow"
            :totals="total"
            add delCheck reset
            @refresh="getall()"
            @add="add"
            @del="del"
            @edit="edit"
            @reset="reset"
            @delCheck="delCheck"
            @changePage="changePage" v-loading="spinShow"></dtable>
    <Modal
      title="用户信息"
      v-model="editData"
      :mask-closable="false" class="editm"
      @on-ok="asyncOK"
      @on-cancel="asyncCancel">
      <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
        <Form-item label="账号" prop="Name">
          <Input v-model="formItem.Name" placeholder="请输入" :disabled="addid" @on-enter="asyncOK()"></Input>
        </Form-item>
        <Form-item label="姓名" prop="Pname" >
          <Input v-model="formItem.Pname" placeholder="请输入" @on-enter="asyncOK()"></Input>
        </Form-item>
        <Form-item label="所属单位" prop="Organization">
          <Select v-model="formItem.Organization" disabled placeholder="请选择">
            <Option v-for="item  in org" :value="item.Id" :key="item">{{item.Name}}</Option>
          </Select>
        </Form-item>
        <Form-item label="角色" prop="RoleId">
          <Select v-model="formItem.RoleId" placeholder="请选择">
            <Option v-for="item  in role" :value="item.Id" :key="item">{{item.Name}}</Option>
          </Select>
        </Form-item>
        <Form-item label="状态" prop="Status">
          <Radio-group v-model="formItem.Status">
            <Radio label="1">启用</Radio>
            <Radio label="0">停用</Radio>
          </Radio-group>
        </Form-item>
        <Form-item label="说明" prop="Remark">
          <Input v-model="formItem.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
          </Input>
        </Form-item>
      </Form>
    </Modal>
  </Row>
</template>
<script>
  import api from '../../api'
  import {mapMutations, mapGetters, mapState} from 'vuex'
  import dtable from '../../components/table/dtable.vue'//采用biztable
  export default{
    data(){
      return {
        loading: true,//点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动设置visible来关闭对话框
        spinShow: false,//数据刷新遮罩层
        columns: [
          //多选框
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '名称',
            key: 'Name',
            sortable: true
          },
          {
            title: '角色',
            key: 'RoleName',
            sortable: true,
          },
          {
            title: '所属单位',
            key: 'OrgName',
            sortable: true
          },
          {
            title: '部门',
            key: 'DeptName',
            sortable: true
          },
          {
            title: '状态',
            key: 'Status',
            sortable: true,
            render(h, { row, column, index }) {
            // return `<span>${(row.Status === 0) ? '正常' : '停用'}</span>`;
            return h("span", {}, row.Status === 0 ? "正常" : "停用");
          }
          },
          {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, { row, column, index }) => {
            // return `<i-button type="primary" size="small" @click="edit(${index})">修改</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click:() => {
                      // console.log(index)
                      this.edit(row);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click:() => {
                      this.remove(row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
        ],//表格样式
        dataAll: [],//表格数据来源
        dataShow: true,//是否显示表格数据查看表单
        editData: false,//显示编辑表单
        formItem: {
          Name: '',
          Pname: '',
          RoleId: 31,
          RoleName: '',
          Organization: '',
          OrgName: '',
          Status: 1,
          Remark: ''
        },//数据编辑表单
        ruleValidate: {
          Name: [
            {required: true, message: '账号不能为空', trigger: 'blur'}
          ],
          Pname: [
            {required: true, message: '名称不能为空', trigger: 'blur'},
          ],
        },//数据编辑表单验证规则
        addid: true,//true为修改模式，false为添加模式
        role: [],
        org: [],
        total:0
      }
    },
    components: {
      dtable,
    },
    computed: {
      ...mapState(['isLogin', 'captchaUrl', 'cptId', 'msg', 'userInfo']),

    },
    watch: {},
    methods: {
      //     获取资源名称
      getNameById(value) {
        let rname = ""
        if (value || '') {
          let rv = this.dataAll.filter((col, index) => col.Id === value)
          rname = rv[0].Name
        }
        return rname
      },
      //      改变页码
      changePage (pagedata) {
        this.spinShow = true
        api.GetAllOrgUsers(pagedata).then(response => {
          if (response.data.code === 0) {
            this.total = response.data.Data.total
            this.dataAll = response.data.Data.tabledata

          } else {
            this.$Message.error(this.msg)
          }
        })
        setTimeout(() => {
          this.spinShow = false;
        }, 500);
      },
      getall (){
        this.spinShow = true
        api.GetAllOrgUsers().then(response => {
          if (response.data.code === 0) {
              console.log(response.data.Data)
            this.dataAll = response.data.Data
            this.total = (response.data.Data).length
          } else {
            this.$Message.error(this.msg)
          }
        }, error => {
          this.$Message.error(this.msg, 4)
        })
        setTimeout(() => {
          this.spinShow = false;
        }, 500);
      },
      getOrganization (){
        this.spinShow = true
        api.getOrganizationList().then(response => {
          if (response.data.code === 0) {
            this.org = response.data.Data
          } else {
            this.$Message.error(this.msg)
          }
        }, err => {
          this.$Message.error(this.msg, 4)
        })
      },
      getRole (){
        this.spinShow = true
        api.GetOrgRoleList().then(response => {
          if (response.data.code === 0) {
            this.role = response.data.Data
          } else {
            this.$Message.error(this.msg)
          }
        }, err => {
          this.$Message.error(this.msg, 4)
        })
      },
      edit(index){
        this.addid = true
        this.formItem = index
        this.editData = true
      },
      add(){
        this.addid = false
        this.$refs['editForm'].resetFields()
        this.formItem.Organization=this.userInfo.Organization.Id
        this.editData = true
      },
      asyncOK(){
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            if (this.addid) {
              api.updateUser(this.formItem).then(response => {
                if (response.data.code === 0) {
                  this.getall()
                  this.$Message.success(this.msg)
                } else {
                  this.$Message.error(this.msg, 4)
                }
              }, err => {
                this.$Message.error(this.msg, 4)
              })
            } else if (!this.addid) {
              api.addUser(this.formItem).then(response => {
                if (response.data.code === 0) {
                  this.getall()
                  this.$Message.success(this.msg)
                } else {
                  this.$Message.error(this.msg, 4)
                }
              }, err => {
                this.$Message.error(this.msg, 4)
              })
            }
            setTimeout(() => {
              this.editData = false;
            }, 1000);
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
        this.editData=false
        this.$refs['editForm'].resetFields()

      },
      asyncCancel(){
        this.getall()
        this.$refs['editForm'].resetFields()
      },
      remove(row) {
      this.$Modal.confirm({
        title: '警告',
        content: '确认删除吗',
        onOk: () => {
          this.del(row)
        }
      })
    },
      del(row){
        api.deleteUser(row).then(response => {
          if (response.data.code === 0) {
            this.getall()
            this.$Message.success(this.msg)
          } else {
            this.$Message.error(this.msg, 4)
          }
        }, err => {
          this.$Message.error(this.msg, 4)
        })
      },
      delCheck(row){
        api.deleteUsers(row).then(response => {
          if (response.data.code === 0) {
            this.getall()
            this.$Message.success(this.msg)
          } else {
            this.$Message.error(this.msg, 4)
          }
        }, err => {
          this.$Message.error(this.msg, 4)
        })
      },
      reset(row){
        api.ResetPwd(row).then(response => {
          if (response.data.code === 0) {
            this.getall()
            this.$Message.success(this.msg)
          } else {
            this.$Message.error(this.msg, 4)
          }
        }, err => {
          this.$Message.error(this.msg, 4)
        })
      }

    },
    mounted (){
      let self = this
      self.getall()
      self.getOrganization()
      self.getRole()
    }
  }
</script>
